<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div v-if="!member.conversionApplication"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-white shadow-lg rounded-md p-8 md:p-12 flex items-center justify-center">
          <n-empty description="暂无转正申请书" />
        </div>

        <div v-if="member.conversionApplication"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">

          <h1 class="text-2xl font-bold text-center mb-8">转正申请书</h1>

          <div class="break-words">敬爱的党组织：
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我于XXXX年XX月XX日被党组织批准为中共预备党员，至今预备期已满一年，现我正式向党组织提出转正申请。
          </div>
          <p class=" text-gray-400 my-8 py-4 border-y border-gray-200">
            [ 此处省略正文约800字 ]
          </p>
          <n-space vertical align="end" class="mt-8">
            <div class="font-kaiti">申请人：{{ member.memberName }}</div>
            <div>{{ member.conversionApplication.signatureDate }}</div>
          </n-space>
        </div>
      </n-space>
    </div>
       <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="100" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>

<script setup>
import { NSpace, NEmpty } from 'naive-ui';

// 定义组件的props
defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({
      memberName: '姓名',
      conversionApplication: null
    })
  }
});
</script>

<style scoped>
/* Scoped styles can be added here if needed */
</style>